<template>
  <van-cell-group inset>
    <van-row>
      <van-col span="10">
        <van-field
          placeholder="选择属性"
          @click="type_click"
          v-model="attr_item.name"
          :rules="[{ required: true, message: '请选择属性' }]"
          readonly
        />
        <van-overlay :show="is_show" @click="is_show = false">
          <div class="wrapper" @click.stop>
            <div class="block">
              <van-search
                v-model="search_value"
                show-action
                placeholder="请输入搜索关键词"
                @cancel="is_show = false"
                @update="search_change"
              />
              <van-list finished-text="没有更多了">
                <van-cell
                  v-for="item in filiter"
                  :key="item.id"
                  :title="item.name"
                  @click="selected_attr(item)"
                />
              </van-list>
            </div>
          </div>
        </van-overlay>
      </van-col>
      <van-col span="10">
        <van-field
          v-model="attr_item.value"
          name="属性值"
          placeholder="属性值"
          :rules="[{ required: true, message: '请填写属性值' }]"
        />
      </van-col>
      <van-col span="4" v-if="index != 0">
        <van-button
          type="primary"
          size="small"
          hairline="true"
          @click="deleteStudent"
          >删除</van-button
        >
      </van-col>
    </van-row>
  </van-cell-group>
</template>

<script>
import { Popup, Col, Row, Search, Cell } from 'vant'
import { Form, Field, CellGroup, Overlay, List } from 'vant'
import axis from 'axios'
// import { ref } from 'vue'

export default {
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Popup.name]: Popup,
    [Col.name]: Col,
    [Row.name]: Row,
    [Overlay.name]: Overlay,
    [Search.name]: Search,
    [Cell.name]: Cell,
    [List.name]: List,
  },
  props: {
    index: {
      type: Number,
      required: true,
    },
    items: {
      type: Array,
      default: Array,
    },
  },
  data() {
    return {
      attrs_types: [],
      attr_item: {
        id: '',
        name: '',
        value: '',
      },
      is_show: false,
      search_value: '',
    }
  },
  setup() {
    // const search_value = ref('')
    // return { search_value }
  },
  mounted: function () {
    this.get_attrs()
  },
  computed: {
    filiter() {
      //过滤数据，找出数据的名字包含输入的字符，符合标准直接输出数据
      return this.attrs_types.filter((item) => {
        return (
          item.name.includes(this.search_value) ||
          item.name.toUpperCase().includes(this.search_value.toUpperCase())
        )
      })
    },
  },

  methods: {
    get_attrs: function () {
      axis.get('/apis/attrs/').then((response) => {
        console.log(response)
        this.attrs_types = response.data
      })
    },
    type_click: function () {
      console.log(1111)
      this.is_show = true
    },
    deleteStudent: function () {
      this.$emit('deleteIndex', this.index)
    },
    search_change: function () {
      console.log(this.search_value)
      console.log(this.attrs_types)
    },
    selected_attr: function (item) {
      // 点击属性项的方法

      // 储存数据
      this.attr_item.id = item.id
      this.attr_item.name = item.name
      // 关闭弹框
      this.is_show = false
      console.log(item)
    },
  },
  watch: {
    attr_item: {
      handler(newV, oldV) {
        console.log(oldV)
        console.log('======================')
        console.log(newV)
        if (newV.name.length === 0) {
          return false
        }
        if (newV.value.length === 0) {
          return false
        }

        this.$emit('uploadData', { index: this.index, data: newV })
      },
      deep: true,
    },
    items: {
      handler(newV, oldV) {
        console.log(oldV)
        if (newV.length !== 0) {
          this.attr = { ...newV[this.index] }
        }
      },
      deep: true,
    },
  },
}
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 300px;
  height: 400px;
  background-color: #fff;
  overflow-y: auto;
}
</style>
